<template>
  <div v-if="data" class="drawerTemplateData">
    <div v-for="(item, key) in data.list" :key="key" :id="item?.id"
      :class="['drawerTemplateData-view', `${item?.isBlock ? 'drawerTemplateData-view-block' : ''}`]">
      <div v-if="!item?.hiddenTitle && (item?.labelZh || item?.labelEn || item?.labelRu)" class="drawerTemplateData-view-title">
        {{ getLabelFn(item) }}

        <DrawerTemplateInput v-if="item.labelList && item.labelList.length" :data="item.labelList[0]"/>

        <n-button v-if="isShowSaveBtn && item.saveParameters" type="primary" :loading="item.loading" @click="btnClickFn(item)">
          {{ getPageLangValueFn('btn.saveParameters','productionCenter') }}
        </n-button>
      </div>

      <div v-if="item?.type === 'print' && item.list && item.list.length" class="drawerTemplateData-view-print">
        <DrawerTemplatePrice :data="item" :isPrint="true" />

        <div v-for="(lItem, lKey) in item.list" :key="lKey" :id="lItem.id" class="drawerTemplateData-view-print-list">
          <div class="drawerTemplateData-view-print-list-title">
            {{ getLabelFn(lItem) }}
          </div>
          <div class="drawerTemplateData-view-print-list-content">
            <DrawerTemplateData :ref="(el) => {
              setRefFn(el, `${lItem.id}`, 'print');
            }" :data="lItem" :isPrint="true" />
          </div>
        </div>
      </div>

      <DrawerTemplateData v-if="item.type !== 'print' && item.type !== 'box' && item.type !== 'boxList'" :ref="(el) => {
        setRefFn(el, `${item.id}`, null);
      }" :data="item" :isPrint="false" />

      <div v-if="item.type === 'box'" class="drawerTemplateData-view-box">
        <div class="drawerTemplateData-view-box-img-view">
          <img :src="setImgSrcFn(item)" :alt="getLabelFn(item)" />

          <DrawerTemplateData :ref="(el) => {
            setRefFn(el, `${item.id}`, null);
          }" :data="item" :isPrint="false" :isBox="true" />
        </div>
      </div>

      <div v-if="item.type === 'boxList' && item.defaultValGetOrderField && item.list && item.list.length" class="drawerTemplateData-view-box-list">
        <!-- {{ chooseItem.cartonTypeName }} -->
        <div v-for="(bItem,bKey) in item.list" :key="bKey" class="drawerTemplateData-view-box-list-view">
          <div v-if="chooseItem && bItem.value === chooseItem[item.defaultValGetOrderField] && bItem.list && bItem.list.length" class="drawerTemplateData-view-box" >
            <div class="drawerTemplateData-view-box-img-view">
              <img :src="setImgSrcFn(bItem)" :alt="getLabelFn(bItem)" />

              <DrawerTemplateData :ref="(el) => {
                setRefFn(el, `${bItem.id}`, null);
              }" :data="bItem" :isPrint="false" :isBox="true" />
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="DrawerTemplateData">
import { useMixins } from '@/hooks/useMixins';

import DrawerTemplateData from './DrawerTemplateData.vue';

import DrawerTemplatePrice from './DrawerTemplatePrice.vue';

import DrawerTemplateInput from './DrawerTemplateInput.vue';
import { storage } from '@render/utils/Storage';

type Props = {
  data?: any;
};

const props = withDefaults(defineProps<Props>(), {
  data: () => null,
});

const drawerTemplateDataRefList: any = [];

const drawerTemplateDataPrintRefList: any = [];

const { language, getPageLangValueFn, routerPage } = useMixins();

const isShowSaveBtn = routerPage.value !== "offline";

const data: any = ref(null);

const chooseItem:any = inject('chooseItem', null);

const setRefFn = (el: any, name: any, type: any) => {
  // 动态设置ref
  if (el) {
    const obj = {
      name,
      el
    };

    let list = type === 'print' ? drawerTemplateDataPrintRefList : drawerTemplateDataRefList;

    const isAdd = list.every((item, key) => {
      if (item.name === name) {
        list[key] = obj;

        return false;
      }

      return true;
    });

    if (isAdd) {
      list.push(obj);
    }
  }
};

const setDataFn = () => {
  if (props.data) {
    data.value = props.data;
    // console.log(data.value.list)
  }
};

setDataFn();

const getLabelFn = item => {
  // 获取label文字方法
  if (item) {
    const { labelZh = null, labelEn = null , labelRu = null } = item;

    if (labelZh || labelEn || labelRu) {
      return language.value === 'zh' ? labelZh || labelEn || labelRu : language.value === 'ru' ? labelRu || labelEn || labelZh: labelEn || labelZh || labelRu;
    }
  }
  return '-';
};

const setMaterialParamFn: any = inject('setMaterialParamFn',null);

const btnClickFn = (item: any) => {
  // 保存参数
  if (item && setMaterialParamFn) {
    const { type = null, id = null } = item;

    const list = type === 'print' ? drawerTemplateDataPrintRefList : drawerTemplateDataRefList;

    let submitList:any = [];

    if (type === 'print') {
      for (const dItem of list) {
        if (dItem.el && dItem.el && dItem.el.getDrawerTemplateInputDataFn) {
          submitList = [...submitList, ...dItem.el.getDrawerTemplateInputDataFn()];
        }

      }
    } else {
      let ref: any = null;

      list.every(dItem => {
        if (dItem.name === id) {
          ref = dItem.el;

          return false;
        }

        return true;
      })

      if (ref && ref.getDrawerTemplateInputDataFn) {
        submitList = ref.getDrawerTemplateInputDataFn();
      }
    }

    if (submitList && submitList.length) {
      item.loading = true;

      setMaterialParamFn(submitList, () => { item.loading = false });
    }
  }
};

const getAllDrawerTemplateInputDataFn = () => {
  // 获取所有输入框的值
  let list: any = [];

  if (drawerTemplateDataPrintRefList && drawerTemplateDataPrintRefList.length) {
    for (const item of drawerTemplateDataPrintRefList) {
      const { el = null } = item;

      if (el && el.getDrawerTemplateInputDataFn) {
        list = [...list, ...(el.getDrawerTemplateInputDataFn() || [])]
      }
    }
  }

  if (drawerTemplateDataRefList && drawerTemplateDataRefList.length) {
    for (const item of drawerTemplateDataRefList) {
      const { el = null } = item;

      if (el && el.getDrawerTemplateInputDataFn) {
        list = [...list, ...(el.getDrawerTemplateInputDataFn() || [])]
      }
    }
  }

  return list;
}

const interfaceImageList = inject('interfaceImageList', ref([]))

const baseUrl = `http://${storage.get('host')}:3000/file/`;

const setImgSrcFn = (item) => {
  if (item) {
    const { imgMapKey,img } = item;

    if (imgMapKey && interfaceImageList && interfaceImageList.value&&interfaceImageList.value.length) {
      const obj = interfaceImageList.value.find(item => item.imgCode === imgMapKey);

      if (obj) {
        return `${baseUrl}${obj.imgUrl}`;
      }
    }

    return img;
  }
}

defineExpose({ setDataFn, getAllDrawerTemplateInputDataFn });
</script>
<style lang="less" scoped>
.drawerTemplateData {
  padding: 10px 0;

  :deep(.n-input__input-el) {
    font-size: 18px !important;
    height: 40px !important;
    color: #222222;
  }

  // :deep(.n-input-wrapper) {
  //   width: 120px !important;
  // }

  // :deep(.n-button) {
  //   --n-border: none !important;
  //   --n-border-hover: none !important;
  //   --n-border-focus: none !important;
  //   --n-border-pressed: none !important;
  //   --n-border-disabled: none !important;
  //   --n-color-pressed: none !important;
  //   --n-color-focus: none !important;
  //   --n-color-hover: none !important;
  // }

  :deep(.n-button--primary-type) {
    min-width: 100px !important;
    height: 40px;
    // background: linear-gradient(
    //   146deg,
    //   #aaabab 5%,
    //   #aaabab 15%,
    //   #e5e5e5 35%,
    //   #ffffff 55%,
    //   #e5e5e5 70%,
    //   #aaabab 90%,
    //   #aaabab 100%,
    //   lime 100px
    // );
    // border-radius: 0px !important;
    // color: #4d4d4d;
    // // border:0 !important;
    // border: 0px solid #d9d9d9;
    // border-image-source: linear-gradient(45deg, #5d5d5d, #aaabab);
    // // border: 1px solid #757575;
    // border-image-slice: 1;
    // clip-path: inset(0 round 3px);
    font-size: 18px;
    // color: #222222;
  }

  // :deep(.n-button:not(.n-button--disabled):hover) {
  //   color: #4d4d4d;
  // }

  // :deep(.n-button:not(.n-button--disabled):focus) {
  //   color: #4d4d4d;
  // }

  .drawerTemplateData-view-title {
    font-weight: 500;
    font-size: 20px;
    display: flex;
    height: 48px;
    line-height: 48px;
    // margin-bottom: 15px;
    position: relative;
    padding: 0 20px 0 35px;
    background-color: #f9f9f9;
    color: #222222;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &::before {
      content: '';
      position: absolute;
      top: 25%;
      left: 20px;
      width: 5px;
      height: 50%;
      background-color: #307AFA;
      bottom: 0;
    }
  }

  .drawerTemplateData-view-price {
    display: flex;
    justify-content: space-between;
    margin: 0 20px;
  }

  .drawerTemplateData-view-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
    // padding: 30px 10px 0 20px;
  }

  .drawerTemplateData-view-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 18px;
    width: 50%;

    .drawerTemplateData-view-item-w120 {
      width: 120px;
    }

    .drawerTemplateData-view-item-text {
      text-align: center;
      color: #307AFA;
    }

    .drawerTemplateData-view-item-text-reality {
      width: 86px;
    }

    .drawerTemplateData-view-item-text-setup {
      width: 180px;
    }

    .drawerTemplateData-view-item-input {
      display: flex;
    }

    .drawerTemplateData-view-item-list {
      display: flex;
      flex: 1;
    }

    // .drawerTemplateData-view-item-input-margin{
    //   margin-right: 12px;
    // }

    .drawerTemplateData-view-item-input-write-number-confirm {
      margin-left: 12px;
    }

    .drawerTemplateData-view-item-input {
      color: #222222;
    }

    .drawerTemplateData-view-item-label {
      width: 100px;
    }

    .drawerTemplateData-view-item-read {
      width: 120px;
      margin-right: 15px;
    }

    .drawerTemplateData-view-item-input-read-val {
      width: 118px;
      height: 38px;
      background: #ebebeb;
      border-radius: 4px;
      border: 1px solid #d4d6d9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #222222;
    }

    .drawerTemplateData-view-item-input-write {
      display: flex;
      flex: 1;
    }

    .drawerTemplateData-view-item-input-write-number {
      width: 120px;
      border-radius: 4px !important;
    }
  }

  .drawerTemplateData-view-print {
    margin: 20px 0;

    :deep(.drawerTemplateData-view-item) {
      border-bottom: none;
    }

    :deep(.drawerTemplateData-view-content) {
      padding: 0;
    }
  }

  .drawerTemplateData-view-print-list {
    display: flex;
    padding: 0 20px;

    .drawerTemplateData-view-print-list-title {
      width: 20px;
      padding: 20px;
      border-bottom: 1px solid #e8e8e8;
      border-left: 1px solid #e8e8e8;
      font-size: 20px;
      color: #307AFA;
      line-height: 26px;
      display: flex;
      align-items: center;
    }

    .drawerTemplateData-view-print-list-content {
      flex: 1;
      padding: 10px 20px;
      border-bottom: 1px solid #e8e8e8;
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
    }
  }

  .drawerTemplateData-view-box {
    background-color: #f9f9f9;

    margin: 20px auto;
    overflow: hidden;

    .drawerTemplateData-view-box-img-view {
      position: relative;
      max-width: 925px;
      margin: 42px auto;
      // padding: 42px 0;
    }

    img {
      width: 100%;
      display: block;
      // margin: 30px 0;
      // max-height: 480px;
      // object-fit: contain;
    }
  }

  .drawerTemplateData-view-btn {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
  }
}
</style>

<style lang="less">
.drawerTemplateData-view {
  &.drawerTemplateData-view-block {
    .drawerTemplateData-view-item-w120 {
      width: auto;

      &:nth-of-type(1) {
        width: 879px;
      }
    }

    .drawerTemplateData-view-item {
      width: 100%;

      .drawerTemplateData-view-item {
        width: auto;
      }

      .drawerTemplateData-view-item-label {
        flex: 1;
        width: auto;
      }
    }
  }
}

.drawerTemplateData-view-title{
  .drawerTemplateData-view-item{
    border-bottom: none!important;
    justify-content: flex-end;
  }
}
</style>
